<template>
    <el-dialog
            title="用户管理"
            :visible.sync="dialogVisible"
            width="40%"
            :fullscreen="fullscreen"
    >
        <div slot="title" class="save_title">
            用户管理
            <i class="screen_ctr fa" @click="fullscreen=!fullscreen" :class="fullscreen?'fa-compress':'fa-expand'"></i>
        </div>
        <div class="save_wrapper">
            <el-form ref="save" size="mini" :inline="true" :model="editForm" :rules="rules">
                <el-form-item label="用户名" prop="nickName" :label-width="formLabelWidth">
                    <el-input  v-model.trim="editForm.nickName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="用户账号" prop="username" :label-width="formLabelWidth">
                    <el-input  v-model.trim="editForm.username" placeholder="请输入用户账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                    <el-input  v-model.trim="editForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="roleIds" :label-width="formLabelWidth">
                    <el-select v-model="editForm.roleIds" @change="roleChange" multiple placeholder="请选择角色">
                        <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.roleName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" size="mini" @click="save" :loading="isloading">确 定</el-button>
          </span>
    </el-dialog>
</template>

<script>
    import saveMixins from '../../../../common/mixins/saveMixins'
    import {selectById,saveUser} from "../../../../api/base/user";
    import {selectAll} from "../../../../api/base/role";
    import validate from './validate'
    export default {
        name: "save" ,
        mixins:[saveMixins],
        data(){
            return{
                formLabelWidth:'80px',
                rules:validate,
                roles:[]
            }
        },
        created(){
            selectAll().then(res=>{
                if(res.status===0){
                    this.roles=res.data;
                }else {
                    this.$message.error(res.msg)
                }
            })
        },
        methods:{
            setDataBack(data){
                if(data&&data.id){
                    if(data.roles&&data.roles.length>0){
                        let roleIds=[];
                        data.roles.forEach(item=>{
                            roleIds.push(item.id)
                        });
                        this.editForm.roleIds=roleIds;
                    }
                }
            },
            selectById(param){
                return selectById(param);
            },
            commit(data){
                return saveUser(data);
            },
            roleChange(data){
                this.$forceUpdate();
            }
        }
    }
</script>

<style scoped lang="sass">
    @import "../../../../styles/save"
</style>
